/**
 * title: 用户
 * Routes:
 *   - ./src/routes/PrivateRouter.js
 * authority: ["admin"]
 */
import React from 'react';
// import { Table } from 'antd';
// import styles from './index.scss';
import {
  Content,
  Tool
} from '@/components/Layout';
import { Button, Message, Popconfirm } from 'antd';
import Table from '@/components/Table';
// import {fetch} from './services/users';
import {connect} from 'dva';
import UserModel from './components/UserModel';

const index = ({
    list,
    dispatch,
    loading,
    addLoading,
    total, 
    page, 
    pageSize
  }) => {
  // fetch().then(res=>console.log(res))
  // console.log(loading);
  // console.log(addLoading)
  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      width: '25%',
    },
    {
      title: '姓名',
      dataIndex: 'nickname',
      key: 'nickname',
      width: '25%',
    },
    {
      title: '用户类型',
      dataIndex: 'type',
      key: 'type',
      width: '25%',
      render: text => <span> {text === '0' ? '管理员' : '普通用户'} </span>,
    },
    {
      title: '操作',
      key: 'operation',
      render: (text, record) => (
        <div>
          {/* <UserModal onOk={value => handleEdit(record.id, value)}   record={record}> */}
          < UserModel title = "编辑用户"
          record = {
            record
          } 
            onOk={value => handleEdit(record.id, value)}>
            <a href="/users"> 编辑 </a>
          </UserModel>
          {/* </UserModal> */}
          {/* <Popconfirm title="确定删除该用户吗?" onConfirm={() => handleDelete(record.id)}> */}
          <Popconfirm title="确定删除该用户吗?" onConfirm={() => handleDelete(record.id)}>
            <a href="/users"> 删除 </a>
          </Popconfirm>
          {/* </Popconfirm> */}
        </div>
      ),
    },
  ];
  
  const reload=()=>{
    dispatch({
      type: 'users/fetch',
      payload: {page:1},
    })
  }
  const handleAdd= values=>{
    // console.log(values)
    return dispatch({
      type: 'users/add',
      payload: values
    }).then(res=>{
      // console.log(res)
      if(res&&res.state==='success'){
        Message.success(res.msg);
        reload();
        return res;
      }else{
        Message.error("添加用户失败")
      }
    });
  };
  //分页
  const handlePageChange = pageNum =>{
    console.log(pageNum)
    if(page!==pageNum){
      //发请求
      dispatch({type:'users/fetch',payload:{page:pageNum}});
    }
  }
  const handleEdit = (id,value)=>{
    console.log(value,id)
    return dispatch({
      type: 'users/edit',
      payload:{
        id,
        value,
      }
    }).then(res => {
      // console.log(res)
      if (res && res.state === 'success') {
        Message.success(res.msg||"编辑用户成功");
        reload();
        return res;
      } else {
        Message.error("编辑用户失败")
      }
    });
  }
  const handleDelete = id => {
    dispatch({
      type: 'users/remove',
      payload: id,
    }).then(res => {
      // console.log(res)
      if (res && res.state === 'success') {
        Message.success(res.msg || "删除用户成功");
        reload();
      } else {
        Message.error("删除用户失败")
      }
    });
  }
  return (
    <Content>
      <Tool>
        <UserModel onOk={handleAdd} addLoading={addLoading}>
          <Button type = "primary" > 添加用户 </Button>
        </UserModel>
      </Tool>
      <Table 
      columns={columns} 
      dataSource={list} 
      rowKey={(list,index)=>list.id}
      loading={loading}
      pagination={
        {
          total,
          pageSize,
          current: page,
          onChange: handlePageChange,
        }
      }/>
    </Content>
  );
};
export default connect(({ users, loading }) => ({
  ...users,
  loading: loading.effects['users/fetch'],
  addLoading: loading.effects['users/add'],
}))(index);//这个页面关联model(users)的状态
